<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="https://hammerjs.github.io/dist/hammer.js"></script>
		<title>Document</title>
		<style>
			#myElement {
				background: silver;
				height: 300px;
				text-align: center;
				font: 30px/300px Helvetica, Arial, sans-serif;
			}
		</style>
	</head>
	<body>
		<div id="myElement"></div>
		<script>
			// var myElement = document.getElementById("myElement");
			// var mc = new Hammer(myElement);
			// mc.on("panleft panright tap press", function (ev) {
			// 	myElement.textContent = ev.type + " gesture detected.";
			// });

			var myElement = document.getElementById("myElement");

			var mc = new Hammer.Manager(myElement);

			// create a pinch and rotate recognizer
			// these require 2 pointers
			var pinch = new Hammer.Pinch();
			var rotate = new Hammer.Rotate();

			// we want to detect both the same time
			pinch.recognizeWith(rotate);

			// add to the Manager
			mc.add([pinch, rotate]);

			mc.on("pinch rotate", function (ev) {
				myElement.textContent += ev.type + " ";
			});
		</script>
	</body>
</html>
